<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
	<title>ByHand Frontend</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="css/main.css" rel="stylesheet">
	<!-- 
		Color
		normal color: #E6C2AA
		middile color: #97261E
	-->
	<style>
	body {
		background-color:#E6C2AA;
	}
	.border-top {
		border-top-width:1px;
		border-top-style:solid;
		border-top-color:#97261E
	}
	.border-bottom {
		border-bottom:1px;
		border-bottom-style:solid;
		border-bottom-color:#97261E
	}
	.container-narrow a {
		color:#97261E;
	}
	.container-narrow a:hover {
		color:#97261E;
	}
	.header.nav>li>a:hover, .nav>li>a:focus {
		background-color:#97261E;
		color:#E6C2AA;
	}
	a.carousel-control {
		background-color:none!important;
	}
	.container-narrow {
		border:1px solid #97261E;
	}
	.price {
		color:#97261E;
	}
	.discount {
		color:#97261E;
	}
	.bg2 {
		background: url(images/bg_loop.png) repeat;
		min-height: 1080px;
		-moz-user-select: none;
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.bg {
		background: url(images/bg.jpg) top center no-repeat;
		min-height: 1080px;
		-moz-user-select: none;
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: -1;
		min-width: 1200px;
		background-size: 100% auto;
	}
	</style>
</head>
<body>
	<!-- <div class="bg"></div>
	<div class="bg2"></div> -->
	<div class="container-narrow">
		<div class="header">
			<ul class="nav nav-pills pull-right">
				<li><a href="#">Đăng nhập</a></li>
			</ul>
			<h3><img class="logo" src="images/logo_retro.png" /></h3>
		</div>
		<div class="product-media">
			<div id="carousel-example-generic" class="carousel slide border-top border-bottom">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner">
					<div class="item active">
						<img src="images/retro1.jpg" alt="...">
					</div>
					<div class="item">
						<img src="images/retro2.jpg" alt="...">
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
					<span class="icon-prev"></span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
					<span class="icon-next"></span>
				</a>
			</div>
		</div>
		<div class="product-info">
			<h1>Váy vintage Alexa chiffon đáp ren</h1>
			<p class="lead">Alexa là mẫu váy thời trang mang phong cách cổ điển, sang trọng với chất liệu cao cấp và họa tiết độc đáo.</p>
		</div>
		<div class="row marketing">
			<div class="col-lg-6">
				<h4>Điểm nổi bật</h4>
				<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
				<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>
			<div class="col-lg-6">
				<div class="well well-lg">
					<p class="price">500.000đ <span class="original-price">945.000đ</span></p>
					<p><a type="button" data-toggle="modal" href="#checkout" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-shopping-cart"></span> Đặt hàng</a> <span class="discount">Giảm 40%</span></p>
				</div>
				<h4>Thông tin sử dụng</h4>
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
				<h4>Kiếm thêm thu nhập</h4>
				<p>Bấm like Facebook hoặc gửi link cho bạn bè để có cơ hội nhận <strong>5%</strong> hoa hồng cho mỗi đơn hàng giới thiệu.</p>
				<p><a href=""><span class="glyphicon glyphicon-usd"></span> Tìm hiểu thêm</a></p>
			</div>
		</div>
		<div class="footer border-top">
			<p>&copy; <strong>Retro Boutiques</strong> bán hàng qua hệ thống <a href="http://byhand.vn" target="_blank">ByHand.vn</a></p>
		</div>
	</div> <!-- /container -->
	<!-- Modal -->
	<div class="modal fade" id="checkout" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Hoàn tất đơn đặt hàng</h4>
				</div>
				<div class="modal-body">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#checkout-product" data-toggle="tab">1. Chọn sản phẩm</a></li>
						<li><a href="#checkout-address" data-toggle="tab">2. Điền thông tin</a></li>
						<li><a href="#checkout-payment" data-toggle="tab">3. Hình thức thanh toán</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="checkout-product">
							<h3>Váy vintage Alexa chiffon đáp ren</h3>
							<form class="product-options">
								<div class="form-group">
									<h5>Màu</h5>
									<select class="form-control">
										<option>Đỏ</option>
										<option>Xanh</option>
										<option>Vàng</option>
										<option>Tím</option>
										<option>Hồng</option>
									</select>
								</div>
								<div class="form-group">
									<h5>Kích cỡ</h5>
									<select class="form-control">
										<option>S</option>
										<option>M</option>
										<option>L</option>
										<option>XL</option>
									</select>
								</div>
								<div class="form-group">
									<button type="button" class="btn btn-success">Thêm vào giỏ hàng</button>
								</div>
							</form>
							<h4><span class="glyphicon glyphicon-shopping-cart"></span> Giỏ hàng</h4>
							<table class="table table-bordered table-condensed">
								<tbody>
									<tr>
										<th>Sản phẩm</th>
										<th>Số lượng</th>
										<th>Giá tiền</th>
										<th>Tổng</th>
									</tr>
									<tr>
										<td>Váy vintage Alexa chiffon đáp ren<br />
											Màu: Đỏ - Kích cỡ: M</td>
										<td data-col="quantity">
											<div class="input-group" style="width: 80px;">
												<select class="form-control " data-type="quantity" onchange="byhand_update_quatity(this);" id="byhand-input-quantity">
													<option selected="" value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
												</select>
											</div>
											<!-- /input-group -->
										</td>
										<td data-col="price">500.000đ</td>
										<td data-col="calculatesprice">500.000đ</td>
									</tr>
									<tr>
										<td>Váy vintage Alexa chiffon đáp ren<br />
											Màu: Vàng - Kích cỡ: S</td>
										<td data-col="quantity">
											<div class="input-group" style="width: 80px;">
												<select class="form-control " data-type="quantity" onchange="byhand_update_quatity(this);" id="byhand-input-quantity">
													<option selected="" value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
												</select>
											</div>
											<!-- /input-group -->
										</td>
										<td data-col="price">500.000đ</td>
										<td data-col="calculatesprice">500.000đ</td>
									</tr>
									<tr>
										<td colspan="3"><strong>Tổng Tiền</strong><input type="hidden" value="1000000" id="byhand-input-finalmoney"></td>
										<td id="byhand-final-money"><strong>1.000.000đ</strong></td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="tab-pane" id="checkout-address">
							<form class="form-horizontal" role="form">
								<h4>Thông tin mua hàng</h4>
								<div class="form-group">
									<label for="inputName" class="col-lg-2 control-label">Họ và tên</label>
									<div class="col-lg-10">
										<input type="text" class="form-control" id="inputName" placeholder="Họ và tên đầy đủ của bạn">
									</div>
								</div>
								<div class="form-group">
									<label for="inputMobile" class="col-lg-2 control-label">Số điện thoại</label>
									<div class="col-lg-10">
										<input type="tel" class="form-control" id="inputMobile" placeholder="Số điện thoại di động của bạn">
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail" class="col-lg-2 control-label">Địa chỉ email</label>
									<div class="col-lg-10">
										<input type="email" class="form-control" id="inputEmail" placeholder="Địa chỉ email của bạn">
									</div>
								</div>
								<h4>Thông tin nhận hàng</h4>
								<div class="form-group">
									<label for="inputCity" class="col-lg-2 control-label">Tỉnh/Thành phố</label>
									<div class="col-lg-10">
										<select id="inputCity" class="form-control">
											<option>Hà Nội</option>
											<option>TP. Hồ Chí Minh</option>
											<option>Hải Phòng</option>
											<option>Đà Nẵng</option>
											<option>Cần Thơ</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputDistrict" class="col-lg-2 control-label">Quận/Huyện</label>
									<div class="col-lg-10">
										<select id="inputDistrict" class="form-control">
											<option>Ba Đình</option>
											<option>Hoàn Kiếm</option>
											<option>Đống Đa</option>
											<option>Hai Bà Trưng</option>
											<option>Cầu Giấy</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputAddress" class="col-lg-2 control-label">Địa chỉ</label>
									<div class="col-lg-10">
										<input type="text" class="form-control" id="inputAddress" placeholder="Địa chỉ đầy đủ và chính xác nơi nhận hàng">
									</div>
								</div>
							</form>
						</div>
						<div class="tab-pane" id="checkout-payment">
							<form>
								<div id="onlineBank">
									<label>
										<img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/sohapay3.png" />
										<input type="radio" value="1" name="Choice" class="step3-choice">
										&nbsp;&nbsp;Dùng thẻ Visa, Master hoặc thẻ ATM có Internet Banking
										<ul>
											<li>Thanh toán nhanh gọn, sử dụng thẻ Visa, Master Card hoặc thẻ ATM (tài khoản có Internet Banking).</li>
											<li>Hỗ trợ thẻ của <a href="#" id="banksupport" data-toggle="popover" data-placement="right" data-original-title="Các ngân hàng hỗ trợ">22 ngân hàng</a>.</li>
										</ul>
									</label>
								</div>
								<div id="COD">
									<label>
										<img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/cop.png" />
										<input type="radio" value="2" name="Choice" class="step3-choice">
										&nbsp;&nbsp;Thu tiền mặt tận nơi (COD)
										<ul>
											<li>Trong thời gian 3 ngày làm việc, sẽ có nhân viên liên lạc và đến tận nơi thu tiền, giao hàng cho Quý khách.</li>
											<li>Quý khách vui lòng trả thêm <span class="text-danger">10.000đ</span> chi phí.</li>
										</ul>
									</label>
								</div>
								<div id="ATM">
									<label>
										<img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/atm.png" />
										<input type="radio" value="3" name="Choice" class="step3-choice">
										&nbsp;&nbsp;Chuyển tiền qua ngân hàng
										<ul>
											<li>Phí chuyển tiền do người mua chi trả.</li>
											<li>Đơn hàng sẽ bị hủy nếu sau 24h không nhận được thông báo chuyển tiền (chỉ tính giờ hành chính).</li>
										</ul>
									</label>
								</div>
								<div class="alert alert-success">Bấm vào nút <strong>Tiếp tục</strong> để hoàn tất quá trình thanh toán.</div>
							</form>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Quay lại</button>
					<button type="button" class="btn btn-primary">Tiếp tục <span class="glyphicon glyphicon-chevron-right"></span></button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<script src ="js/jquery.min.js"></script>
	<script src ="js/bootstrap.min.js"></script>
	<script>
	var img = '<img src="images/banks.png" />';
	$(document).ready(function(){
		$('.carousel').carousel({
			interval: 5000
		});
	});
	$('#banksupport').popover({
		trigger: 'hover',
		content: img,
		html: true
	});
	</script>
</body>
</html>